<template>
  <view class="mine-container">
    <view class="bg"></view>
    <view class="status-contents" v-if="topBar.style==='custom'"
          :style="{paddingTop: topBar.statusBarHeight+'px', height: topBar.navbarHeight+'px'}">
    </view>
    <view class="user-container flex-row">
      <image :src="mine.avatarUrl ? mine.avatarUrl : 'http://down.qwdata.vip/app_icon/1672758529606'" v-if="isLogin"
             @click="toUserInfo"
             mode="aspectFill" class="avatar"></image>
      <image src="../../static/weidenglu@3x.png" v-else
             @click="toUserInfo" class="avatar"></image>
      <view class="flex-col self-center">
        <text v-if="isLogin" class="login" @click="toUserInfo">{{ mine.name }}</text>
        <text v-else class="login" @click="toUserInfo">立即登录</text>
        <text v-if="!isLogin" class="tips">登录后自动保存做题记录</text>
        <!--        <text class="tips">{{JSON.stringify(query)}}</text>-->
      </view>
      <view class="car_type_container" @click="clickCarType">
        <view class="car_type_btn">
          <view class="jiaohuan_icon"></view>
          {{ carTypeStr }}
          <image src="@/static/mine/xia_jiantou.png" class="icon"/>
        </view>
      </view>
    </view>
    <view class="vip_container">
      <image src="@/static/mine/vip_icon.png" class="vip-icon"></image>
      <template v-if="haveVIP">
        <view class="f1" style="display: flex;flex-direction: column;align-items: baseline">
          <view v-if="isForeverVIP" class="tips-open">恭喜，您已开通永久会员</view>
          <view v-else-if="mine.vipProduct" class="tips-open">已开通{{ vipProductTitle }}</view>
          <view class="tips-open" v-else>恭喜，您已开通VIP功能！</view>
          <view v-if="!isForeverVIP" style="font-size: 12px;opacity: 0.5;margin-top: 5rpx">
            到期时间：{{ dateFormat(mine.vipEndAt || mine.vipEndAt1 || mine.vipEndAt4) }}
          </view>
        </view>
        <view class="look-btn" @click="toInvite">
          <view class="inner">去看看</view>
        </view>
      </template>
      <template v-else-if="mine && mine.vipExpiredStr">
        <view class="f1 tips-open" style="display: flex;align-items: baseline">您的VIP已到期
          <view style="font-size: 20rpx;">
            （{{ mine.vipExpiredStr }}）
          </view>
        </view>
        <view class="look-btn" @click="toInvite">
          <view class="inner">续费开通</view>
        </view>
      </template>
      <template v-else>
        <text class="tips-open">开通会员，获取高级功能</text>
        <view class="look-btn" @click="toInvite">
          <view class="inner">去看看</view>
        </view>
      </template>
    </view>
    <view class="process-container">
      <view class="mine-btn-container">
        <view class="mine-btn" @click="goTo('mine_wrong')">
          <view class="flex v f1">
            <text>我的错题</text>
            <text class="count-text">{{ wrongTotalCount }}题</text>
          </view>
          <image src="@/static/mine/cuoti_icon.png" mode="widthFix" class="mine-btn-icon"></image>
        </view>
        <view class="mine-btn" @click="goTo('mine_collect')">
          <view class="flex v f1">
            <text>我的收藏</text>
            <text class="count-text">{{ collectTotalCount }}题</text>
          </view>
          <image src="@/static/mine/shoucang_icon.png" mode="widthFix" class="mine-btn-icon"></image>
        </view>
      </view>
      <view class="result-container">
        <view class="tab-container" @click="toJingxuan">
          <view class="tab">
            <view class="icon500"></view>
            <text>高效学习 省时省力</text>
            <view class="bg"></view>
          </view>
          <view class="btn">
            去答题
            <view class="next_icon"></view>
          </view>
        </view>
        <view class="body">
          <view class="kemu" @click="toExamResult(1)">
            <view class="kemu_icon">科一</view>
            <view class="item">
              <text class="count-text">{{ kemu1.kaoshiCount }}</text>
              <text class="label">考试次数</text>
            </view>
            <view class="divider"></view>
            <view class="item">
              <text class="count-text">{{ kemu1.kaoshiSuccessCount }}</text>
              <text class="label">合格次数</text>
            </view>
          </view>
          <view class="kemu" @click="toExamResult(4)">
            <view class="kemu_icon">科四</view>
            <view class="item">
              <text class="count-text">{{ kemu4.kaoshiCount }}</text>
              <text class="label">考试次数</text>
            </view>
            <view class="divider"></view>
            <view class="item">
              <text class="count-text">{{ kemu4.kaoshiSuccessCount }}</text>
              <text class="label">合格次数</text>
            </view>
          </view>
        </view>
      </view>
      <view class="bind_panel" v-if="haveVIP && !mine.phone && !mine.wxUnionId">
        <image src="@/static/warning.png" class="warning"></image>
        <view class="text">绑定微信号，防止会员丢失</view>
        <view class="btn" @click="toBindWx">去绑定</view>
      </view>
      <view class="setting-group">
        <view class="setting-btn" @click="showKefu">
          <image src="../../static/kefu@2x.png" mode="widthFix" class="icon "></image>
          <view class="setting-label">官方客服</view>
          <view class="arrow"></view>
        </view>
        <view class="setting-btn" @click="toSettleIn">
          <image src="../../static/ruzhu@2x.png" mode="widthFix" class="icon "></image>
          <view class="setting-label">入驻申请</view>
          <view class="arrow"></view>
        </view>
<!--        <view class="setting-btn" @click="toJihuo" v-if="!haveVIP">
          <image src="../../static/dingdan@2x.png" mode="widthFix" class="icon "></image>
          <view class="setting-label">会员激活</view>
          <view class="arrow"></view>
        </view>-->
        <view class="setting-btn" @click="toSetting">
          <image src="../../static/shezhi@2x.png" mode="widthFix" class="icon "></image>
          <view class="setting-label">设置</view>
          <view class="arrow"></view>
        </view>
      </view>
      <view v-if="mine" style="color: #ccc;text-align: center;padding-bottom: 30rpx" @click="copyId">- {{ mine.id }} -
      </view>
    </view>
    <LoginView ref="LoginView" page="mine"></LoginView>
    <BindPhoneDialog ref="BindPhoneDialog"></BindPhoneDialog>
    <CarTypeDialog ref="CarTypeDialog"></CarTypeDialog>
    <TiyanDialog :bottom="true"></TiyanDialog>
    <BindWxDialog ref="BindWxDialog"></BindWxDialog>
  </view>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import LoginView from '@/components/LoginView/LoginView.vue'
import BannerView from "@/pages/home/BannerView.vue";
import {commonApi} from "@/api";
import BindPhoneDialog from "@/components/BindPhoneDialog.vue";
import CarTypeDialog from "@/components/CarTypeDialog.vue";
import moment from "@/vendor/day";
import TiyanDialog from "@/components/TiyanDialog.vue";
import productUtils from "../../libs/productUtils";
import BindWxDialog from "../../components/BindWxDialog";

export default {
  components: {
    BindWxDialog,
    TiyanDialog,
    BindPhoneDialog,
    CarTypeDialog,
    BannerView,
    LoginView,
  },
  data() {
    return {
      selected: 1
    }
  },
  computed: {
    ...mapGetters(['mine', 'haveAuths', 'isNewUser', 'carTypeStr', 'platform', 'haveVIP', 'query', 'topBar', 'settings', 'systemInfo', 'kaobuguo', 'splashVIPAd', 'isForeverVIP', 'needShowKaipingAD']),
    ...mapGetters('question', ['kemu1', 'kemu4']),
    isLogin() {
      if (this.haveVIP) {
        return true
      }

      return this.haveAuths
    },
    wrongTotalCount() {
      return this.kemu1.wrongTotalCount + this.kemu4.wrongTotalCount
    },
    collectTotalCount() {
      return this.kemu1.collectTotalCount + this.kemu4.collectTotalCount
    },
    kaoshiCount() {
      if (this.selected === 1)
        return this.kemu1.kaoshiCount
      return this.kemu4.kaoshiCount
    },
    kaoshiSuccessCount() {
      if (this.selected === 1)
        return this.kemu1.kaoshiSuccessCount
      return this.kemu4.kaoshiSuccessCount
    },
    vipProductTitle() {
      if (this.mine && this.mine.vipProduct) {
        return productUtils.getProductTitle(this.mine.vipProduct)
      } else {
        return ''
      }
    }
  },
  mounted() {
  },
  methods: {
    ...mapActions(['refreshUser']),
    dateFormat(time) {
      return moment(time).format('YYYY-MM-DD')
    },
    async pageOnShow() {
      await this.refreshUser()
      // #ifdef APP-PLUS
      if (this.haveVIP) {
        if (this.splashVIPAd) {
          plus.ad.setSplashAd(true)
        } else {
          plus.ad.setSplashAd(false)
        }
      } else {
        if (this.needShowKaipingAD) {
          plus.ad.setSplashAd(true)
        } else {
          plus.ad.setSplashAd(false)
        }
      }
      // #endif
    },
    clickCarType() {
      this.$refs.CarTypeDialog.open()
    },
    async pagePullDownRefresh() {
      await this.refreshUser()
      uni.showToast({
        title: '更新成功！',
        icon: 'none'
      })
      uni.stopPullDownRefresh()
    },
    toBindPhone() {
      console.log('BindPhoneDialog')
      this.$refs.BindPhoneDialog.open()
    },
    toBindWx() {
      this.$refs.BindWxDialog.open()
    },
    copyId() {
      uni.setClipboardData({
        showToast: false,
        data: this.mine.id + '',
        success: () => {
          console.log('copyId', this.mine.id)
        }
      });
    },
    toExamResult(kemu) {
      uni.navigateTo({
        url: '/pages/exam_result/exam_result?kemu=' + kemu,
      });
    },
    goTo(page) {
      uni.navigateTo({
        url: `/pages/${page}/${page}`,
      });
    },
    toUserInfo() {
      if (this.isLogin) {
        uni.navigateTo({
          url: '/pages/user/user',
        });
      } else {
        this.$refs.LoginView.open()
      }
    },
    toInvite() {
      console.log('toInvite')
      uni.navigateTo({
        url: '/pages/vip/vip',
      });
    },
    toKaobuguo() {
      uni.navigateTo({
        url: '/pages/kaobuguo/kaobuguo',
      });
    },
    toJingxuan() {
      uni.navigateTo({
        url: '/pages/detail/detail?type=jingxuan&title=精选题库&kemu=' + this.selected,
      });
    },
    toSetting() {
      uni.navigateTo({
        url: '/pages/setting/setting',
      });
    },
    toJihuo() {
      uni.showModal({
        title: '输入激活码',
        editable: true,
        success: async (e) => {
          if (e.cancel) {
            return
          }
          console.log(e)
          if (!e.content || e.content.length < 5) {
            uni.showToast({
              icon: 'none',
              title: '请输入有效激活码'
            })
            return
          }
          try {
            await commonApi.activeVIP(e.content.trim())
            await this.refreshUser()
            uni.showToast({
              icon: 'none',
              title: '激活成功！'
            })
          } catch (e) {
            uni.showToast({
              icon: 'none',
              title: e.message || '激活失败！'
            })
          }
        }
      })
    },
    showKefu() {
      uni.showModal({
        title: '微信联系客服：' + this.settings.kefuPhone,
        content: '早上09:00-晚上21:00',
        confirmText: '复制微信',
        showCancel: false,
        success: () => {
          uni.setClipboardData({
            showToast: true,
            data: this.settings.kefuPhone
          })
        }
      })
    },
    toSchool() {
      uni.navigateTo({
        url: '/pages/school_home/school_home',
      });
    },
    toSettleIn() {
      uni.navigateTo({
        url: '/pages/settle_in/settle_in',
      });
    },
  }
}
</script>

<style lang="scss">
page {
  background-color: #f4f3f9;
}

.mine-container {
  display: flex;
  flex-direction: column;
  position: relative;

  > .bg {
    width: 750rpx;
    height: 546rpx;
    right: 0;
    top: 0;
    position: absolute;
    background-size: cover;
    background-image: linear-gradient(0deg, #f4f3f9 30%, #acbeff 100%);
    z-index: 0;
  }

  .process-container {
    background: #F4F3F9;
    z-index: 1;
  }

  .kaobuguo {
    color: #fff;
    margin: 30rpx;
    margin-top: 0;
    display: flex;
    align-items: center;
    height: 162rpx;
    background-size: cover;
    background-position: center;
    background-image: url("http://down.qwdata.vip/app_icon/1705066899644");
  }

  .status-contents {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 30rpx;
    // background-color: #000;
  }

  .setting-group {
    margin: 30rpx;
    margin-top: 0;
    display: flex;
    overflow: hidden;
    padding-top: 1px;
    padding-bottom: 1px;
    flex-direction: column;
  }

  .setting-btn {
    padding-top: 30rpx;
    padding-bottom: 30rpx;
    background-color: #fff;
    margin-top: 24rpx;
    border-radius: 24rpx;

    &:first-child {
      margin-top: 0;
    }

    line-height: inherit;
    display: flex;
    flex: 1;
    align-items: center;
    font-size: 28rpx;
    color: rgba(53, 60, 90, 1);
    border: none;
    text-align: left;
    font-weight: bold;

    &:last-child {
      border-bottom: none;
    }

    .icon {
      width: 40rpx;
      margin-left: 32rpx;
      margin-right: 16rpx;
    }

    .setting-label {
      flex: 1;
    }

    .arrow {
      width: 32rpx;
      height: 32rpx;
      background-size: cover;
      background-image: url("@/static/mine/right_jiantou.png");
      margin-right: 22rpx;
    }
  }

  .user-container {
    z-index: 1;
    margin-right: 0;
    margin-left: 30rpx;
    color: rgba(0, 0, 0, 0.8);

    .avatar {
      width: 112rpx;
      height: 112rpx;
      border-radius: 86rpx;
      margin-right: 30rpx;
    }

    .login {
      font-size: 36rpx;
      font-weight: 500;
    }

    .tips {
      font-size: 24rpx;
      color: rgba(0, 0, 0, 0.6);
      margin-top: 10rpx;
    }

    .car_type_container {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 13px;

      .car_type_btn {
        height: 66rpx;
        color: #fff;
        background-image: linear-gradient(90deg, #4098FF 0%, #4086FD 34%, #4073FB 70%, #3F66F8 91%);
        border-radius: 100px 0 0 100px;
        display: flex;
        align-items: center;
        padding-left: 20rpx;

        .jiaohuan_icon {
          width: 40upx;
          height: 40upx;
          background-image: url("@/static/mine/jiaohuan.png");
          background-size: cover;
          margin-right: 8rpx;
        }

        .icon {
          width: 24upx;
          height: 24upx;
          margin-left: 8rpx;
          margin-right: 20rpx;
        }
      }
    }
  }

  .bind_panel {
    height: 110rpx;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 25rpx;
    margin: 30rpx;
    padding: 0 30rpx;
    font-size: 30rpx;
    z-index: 1;
    color: #4164f8;
    .warning {
      width: 40rpx;
      height: 40rpx;
      margin-right: 20rpx;
    }

    .text {
      flex: 1;
    }

    .btn {
      background-color: #ecf0ff;
      padding: 12rpx 30rpx;
      border-radius: 40rpx;
      font-size: 14px;
      border: 1px solid #bac6fd;
    }
  }

  .vip_container {
    background-image: linear-gradient(128deg, #3E4253 0%, #2B293A 48%, #2D2B3C 100%);
    border-radius: 14px;
    width: 690rpx;
    height: 144rpx;
    background-size: cover;
    z-index: 1;
    margin: 0 30rpx;
    margin-top: 48rpx;
    padding: 0 30rpx;
    box-sizing: border-box;

    color: #fff;
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-weight: bold;

    .tips-open {
      background: linear-gradient(90deg, #FFB775, #FFCB98, #FFE0BB);
      -webkit-background-clip: text;
      background-clip: text;
      font-weight: bold;
      -webkit-text-fill-color: transparent;
      font-size: 16px;
    }

    .vip-icon {
      width: 46rpx;
      height: 40rpx;
      margin-right: 15rpx;
    }

    text {
      flex: 1
    }

    .look-btn {
      background-image: linear-gradient(112deg, #FBDFB3 0%, #FBCF9E 42%, #FDBC7C 96%);
      border: 1px solid rgba(255, 255, 255, 0.5);
      border-radius: 38rpx;
      font-size: 14px;
      color: #121118;
      letter-spacing: -0.12px;
      text-align: center;
      padding: 5rpx 30rpx;
    }
  }

  .mine-btn-container {
    display: flex;
    margin: 30rpx;

    .mine-btn-icon {
      width: 96rpx;
      height: 96rpx;
      color: rgba(51, 51, 51, 1);
      font-size: 28rpx;
    }

    .mine-btn {
      flex: 1;
      background-color: #fff;
      border-radius: 20rpx;
      margin-left: 30rpx;
      padding: 30rpx;
      display: flex;
      font-weight: bold;
      font-size: 15px;

      &:first-child {
        margin-left: 0;
      }

      .count-text {
        color: rgba(153, 153, 153, 1);
        font-size: 28rpx;
        margin-top: 10rpx;
        font-weight: normal;
      }
    }
  }

  .result-container {
    margin: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    margin-top: 0;
    margin-bottom: 24rpx;
    overflow: hidden;
    border: 1px solid #BDC9FF;

    .tab-container {
      display: flex;
      color: #fff;
      font-size: 30rpx;

      .icon500 {
        width: 162rpx;
        height: 44rpx;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url("@/static/mine/jingxuan500.png");
        margin-left: 30rpx;
        margin-right: 16rpx;
      }

      .btn {
        font-size: 28rpx;
        padding-left: 60rpx;
        padding-right: 30rpx;
        display: flex;
        align-items: center;
        background-color: #3073f6;

        .next_icon {
          width: 24rpx;
          height: 24rpx;
          margin-left: 8rpx;
          background-image: url("@/static/mine/next_btn.png");
          background-size: cover;
        }
      }

      .tab {
        height: 80rpx;
        line-height: 80rpx;
        position: relative;
        display: flex;
        align-items: center;
        color: rgba(51, 51, 51, 1);
        background-color: #fff;
        flex: 1;

        .bg {
          background-image: url("@/static/bj@3x.png");
          background-position: right;
          background-size: cover;
          background-repeat: no-repeat;
          height: 86rpx;
          width: 60rpx;
          position: absolute;
          right: -60rpx;
          top: 0;
        }

        text {
          z-index: 2;
          text-align: center;
        }

        .icon {
          height: 86rpx;
          width: 240rpx;
          position: absolute;
          left: -40rpx;
          top: 0;
          z-index: 1;
        }
      }
    }

    .body {
      padding: 30rpx;
      display: flex;
      position: relative;

      .kemu {
        flex: 1;
        background-color: rgba(238, 241, 255, 1);
        display: flex;
        padding-top: 58rpx;
        padding-bottom: 24rpx;
        margin-right: 18rpx;
        border-radius: 22rpx;
        position: relative;

        &:last-child {
          margin-right: 0;
        }

        .kemu_icon {
          background-image: url("@/static/mine/kaoshi_kemu_bg.png");
          width: 108rpx;
          height: 64rpx;
          position: absolute;
          background-size: cover;
          z-index: 2;
          font-size: 24rpx;
          color: #fff;
          top: -10rpx;
          padding-left: 30rpx;
          padding-top: 5rpx;
          box-sizing: border-box;
        }
      }

      .divider {
        width: 1px;
        height: 40rpx;
        margin-top: 10rpx;
        background-color: rgba(224, 228, 244, 1);
      }

      .item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: rgba(51, 51, 51, 0.5);

        .item-bg {
          width: 244rpx;
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          background-image: linear-gradient(0deg, #ffffff 40%, #feeddb 95%);
        }

        .count-text {
          font-size: 28rpx;
          z-index: 1;
          color: rgba(51, 51, 51, 1);
        }

        .title {
          font-size: 28rpx;
        }

        .success {
          font-size: 20rpx;
          color: #999;
          margin-top: 10rpx;
        }

        .vip-text {
          color: #936036;
          margin-bottom: 10rpx;
          z-index: 1;
          font-weight: bold;
        }

        .vip-btn {
          margin-top: 20rpx;
          color: #fff;
          background-image: linear-gradient(116deg, #e4a15b 0%, #d67b1e 95%);
          font-size: 26rpx;
          padding: 15rpx 35rpx;
          border-radius: 40rpx;
          margin-left: 15rpx;
          z-index: 1;
        }
      }
    }
  }

  .yaoqing-container {
    background-color: #fff;
    border-radius: 20rpx;
    margin: 30rpx;
    padding: 30rpx;
    margin-top: 0;
    display: flex;

    .pk-icon {
      width: 86rpx;
      height: 86rpx;
      margin-right: 30rpx;
    }

    .btn {
      color: #fff;
      background-image: linear-gradient(to right, rgba(112, 84, 246, 1), rgba(123, 138, 255, 1));
      padding: 15rpx 30rpx;
      border-radius: 50rpx;
      align-self: center;
    }
  }
}
</style>
